<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>js图片爆炸效果</title>
	<link rel="stylesheet" href="">
	<style>
		body {
			overflow: hidden;
			background-color: #000;
		}
		*{
			margin: 0;
			padding: 0;
		}
		#box {
			width: 640px;
			height:400px;
			position:absolute;
			left:50%;
			top:50%;
			margin-left: -320px;
			margin-top: -200px;
			border:1px solid #000;
		}
		#box>div {
			position:absolute;
			left: 0;
			top:0;
			width:100%;
			height:100%;
			transform-style:preserve-3d;
		}
		#box>div>div {
			position:absolute;
			transform:preserve-3d;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
		// 图片
		var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
		//z-index的值
		var z = 999999;
		//显示第几张图片
		var index = 0;
		var box = document.getElementById('box')

		boom(10,10)
		//l 传进来几行；t传进来几列;
		function boom(l,t) {
			//创建一个新的div
			var oParentNode = document.createElement("div");
			//设置z-index的值
			oParentNode.style.zIndex = z;
			z--;
			box.appendChild(oParentNode);

			var x = l,y = t;
			for(var i = 0; i < y;i++){
				for(var j = 0;j<x;j++){
					//创建碎片
					var oDiv = document.createElement("div");
					//添加背景图片
					oDiv.style.background = "url("+imgs[index]+")";
					oDiv.style.width = box.clientWidth / x + 'px';
					oDiv.style.height = box.clientHeight / y + 'px';
					oDiv.style.left = (box.clientWidth / x) * j +'px';
					oDiv.style.top = (box.clientHeight / y) * i +'px';
					oDiv.style.backgroundPositionX = (box.clientWidth/ x)* -j + 'px';
					oDiv.style.backgroundPositionY= (box.clientHeight/y)* -i + 'px';
					oDiv.style.transition = (Math.random()*1+0.5)+"s";
					oParentNode.appendChild(oDiv);

				}
			};


			var allDiv = oParentNode.children;
			setTimeout(()=>{
				index++;
				index == imgs.length && (index = 0);

				boom(l,t);
				for(var i= 0;i<allDiv.length;i++){
					allDiv[i].style.transform = 'perspective(800px) rotateX('+ (Math.random()*500-250)+'deg) rotateY('+(Math.random()*500-250)+'deg) translateX('+(Math.random()*500-250)+'px) translateY('+(Math.random()*500-250)+'px) translateZ('+(Math.random()*1000-500)+'px)'
					allDiv[i].style.opacity = 0;
				};
			},2000);

			setTimeout(function(){
				oParentNode.remove();
			},3500)

		}
	</script>					
</body>
</html>